<template>
    <div class="user-manage">
       <div class="top-area">
            <el-input v-model="params.keywords" placeholder="请输入内容" style="width: 200px;" class="filter-item" @keyup.enter.native="searchClick" />
            <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="searchClick">
                搜索
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="addClick" v-if="btn['添加']">
                新增
            </el-button>
        </div>
        <el-table  ref="multipleTable" :data="tableData"
                     border style="width: 100%"
                     row-key="menu.id"
                    class="bill-table">
            <el-table-column
                    prop="menu.name"
                    label="菜单名称">
            </el-table-column>
            <el-table-column
                    prop="menu.url"
                    label="请求地址">
            </el-table-column>
            <el-table-column
                    prop="menu.parentName"
                    label="父级菜单名称">
            </el-table-column>
            <el-table-column
                    prop="menu.level"
                    label="层级">
            </el-table-column>
            <el-table-column
                    prop="menu.ismenuStr"
                    label="是否是菜单">
            </el-table-column>
            <el-table-column
                prop="menu.sortNum"
                label="排序"
                >
            </el-table-column>
            <el-table-column
                    prop="menu.statusStr"
                    label="状态">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="center"
            >
                <template slot-scope="scope">
                   <el-button type="primary" size="mini" @click="updateClick(scope.row)" v-if="btn['修改']">
                        编辑
                    </el-button>
                     <el-button  size="mini" type="danger" @click="deleteClick(scope.row)" v-if="btn['删除']">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog  :title="type == 1?'添加菜单':'编辑菜单'" :visible.sync="dialogStatus" @closed="dalogClosed">
            <el-form :model="menuObject" class="user" status-icon ref="ruleForm">
                <div class="dialog-form">
                    <span class="from-title"><i class="from-title-i">*</i>名称</span>
                    <el-form-item prop="username" class="el-form-userno">
                        <el-input placeholder="请输入..." type="text" v-model="menuObject.name"  ></el-input>
                    </el-form-item>
                </div>
                <div class="dialog-form">
                    <span class="from-title"><i class="from-title-i">*</i>父级名称</span>
                    <el-select v-model="menuObject.parentId" filterable placeholder="请选择">
                        <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item.menu.name"
                        :value="item.menu.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="dialog-form">
                    <span class="from-title">请求地址</span>
                    <el-form-item>
                        <el-input type="text" v-model="menuObject.url"></el-input>
                    </el-form-item>
                </div>
                <div class="dialog-form">
                    <span class="from-title"><i class="from-title-i">*</i>图标</span>
                    <el-form-item prop="name">
                        <el-input placeholder="请输入..."  type="text"
                                v-model="menuObject.icon"></el-input>
                    </el-form-item>
                </div>
                <div class="dialog-form">
                    <span class="from-title">是否是菜单</span>
                    <el-form-item>
                        <el-radio-group v-model="menuObject.ismenu">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>

                    </el-form-item>
                </div>
                <div class="dialog-form">
                    <span class="from-title">排序</span>
                    <el-form-item>
                        <el-input type="text" v-model="menuObject.sortNum"></el-input>
                    </el-form-item>
                </div>
                <div class="dialog-form">
                    <span class="from-title">状态</span>
                    <el-form-item>
                        <el-radio-group v-model="menuObject.status">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer dialog-form">
                <el-button class="bdnone" size="small" @click="dialogStatus = false">取消</el-button>
                <el-button size="small" type="primary" class="btnblue" @click="commitClick">确认</el-button>
            </div>
        </el-dialog >



    </div>
</template>

<script>
import { menuList,deletMenu,addUpdateMenu} from "@/api/menu.service";
export default {
    name: '',
    data() {
        return {
            tableData:[],
             // 1 代表添加菜单 2代表编辑菜单
            type:1,
            params:{
                keywords:'',
                pageNo:1,
                pageSize:1000,
                total:0,
            },
            dialogStatus:false,
            menuObject:{
                name:'',
                icon:'',
                id:0,
                status:1,
                ismenu:1,
                parentId:0,
                sortNum:'',
                url:'',
            },
            selectRow:{},
            options:[],
        }
    },
  computed: {
    btn() {
      return JSON.parse(localStorage.getItem('btn'))[this.$route.name]
    }
  },
    mounted() {
       this.queryTableData();
    },
    methods: {
        searchClick(){
            this.queryTableData()
        },
        queryTableData(){
            this.tableData = []
            this.options = []
            menuList(this.params).then(res=>{
                if(res.code==200){

                    res.value.map((item) =>{
                        this.options.push(item)
                            if (item.menu.ismenu == 1){
                                item.menu.ismenuStr = '是'
                            }else {
                                item.menu.ismenuStr = '否'
                            }
                            if (item.status == 1){
                                item.menu.statusStr = '启用'
                            }else {
                                item.menu.statusStr = '禁用'
                            }
                            if (item.children){
                                item.children.map((val) =>{
                                    if (val.menu.ismenu == 1){
                                        val.menu.ismenuStr = '是'
                                    }else {
                                        val.menu.ismenuStr = '否'
                                    }
                                    if (val.menu.status == 1){
                                        val.menu.statusStr = '启用'
                                    }else {
                                        val.menu.statusStr = '禁用'
                                    }
                                    this.options.push(val)
                                    if (val.children){
                                        val.children.map((value) =>{
                                            this.options.push(value)
                                            if (val.children){
                                                val.children.map((value1) =>{
                                                    if (value1.menu.ismenu == 1){
                                                        value1.menu.ismenuStr = '是'
                                                    }else {
                                                        value1.menu.ismenuStr = '否'
                                                    }
                                                    if (value1.menu.status == 1){
                                                        value1.menu.statusStr = '启用'
                                                    }else {
                                                        value1.menu.statusStr = '禁用'
                                                    }
                                                this.options.push(value1)
                                                })
                                            }
                                        })
                                    }
                                })
                            }
                    })
                   this.tableData = res.value
                    let obj = {
                        menu:{
                            name:'最顶层菜单',
                            id:0
                        }

                    }
                    this.options.unshift(obj)

                }
            })
        },
        addClick(row){
            this.type = 1
            this.selectRow = JSON.parse(JSON.stringify(row))
            this.menuObject = {
                name:'',
                icon:'',
                id:0,
                status:1,
                ismenu:1,
                sortNum:'',
                parentId:0,
                url:'',
            }
            this.dialogStatus = true
        },
        //关闭弹框调用的方法
        dalogClosed(){
            this.dialogStatus = false
        },
        updateClick(row){
            this.type = 2
            this.selectRow = JSON.parse(JSON.stringify(row))
            this.menuObject = JSON.parse(JSON.stringify(row)).menu
            this.dialogStatus = true
        },
        deleteClick(row){
            this.selectRow = JSON.parse(JSON.stringify(row))
            const vm = this
            this.$confirm('确认删除改菜单么？', '确定删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                    }).then(() => {
                        deletMenu(vm.selectRow.menu.id).then((res) =>{
                            vm.$message({type:'success',message:'操作成功'})
                            vm.queryTableData()
                        }).catch((err) =>{

                        })
                    }).catch(() => {

                    });
        },
        commitClick(){
            this.dialogStatus = false
            //提交
            if (this.type == 1){
                delete this.menuObject.id
            }
            //处理level
            let level = 1
            this.options.map((item) =>{
                if (item.parentId == this.menuObject.parentId){
                    level = item.level
                }
            })
            console.warn(this.menuObject)
            this.menuObject.level = level
            addUpdateMenu(this.menuObject).then((res) =>{
                this.$message({type:'success',message:'操作成功'})
                this.queryTableData()
                this.dialogStatus = false
            }).catch((err) =>{

            })
        },

    }
}
</script>

<style scoped>

</style>
<style>
    .user .dialog-form {
        display:flex;
        align-items:center;
        margin-top:10px;
    }
    .user .dialog-form .from-title {
        width:70px;
        margin-right:10px;
    }
    .user .dialog-form .from-title .from-title-i {
        color:red;
    }
    .user .dialog-form  .el-form-item {
        flex:1;
        margin-bottom:0px;
    }
    .top-area {
        margin-bottom:20px;
    }
</style>


